@charset "utf-8";

/* View */
.view-wrap {
	position: relative;
	overflow: visible !important;
}

#viewcomment,
.view-comment-box,
.comment-media {
	overflow: visible !important;
}

.view-wrap .img-photo i { background: rgb(245, 245, 245); padding: 16px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }
.view-wrap .img-photo img { border-radius: 50%; width: 80px !important; height: 80px !important; display:inline-block; }
.view-wrap .img-resize img { max-width:100%; height:auto; }
.view-wrap .no-attach { border-bottom:0px; }
.view-wrap .view-cnt { letter-spacing:0; }

.view-wrap h1 { font-size: 22px; font-weight:bold; margin:0px; line-height:50px; display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; margin:0px; padding:0px 10px; color: rgb(59, 62, 67); letter-spacing:-1px; }
.view-wrap h1 font[color] b,
.view-wrap h1 font[color] strong,
.view-wrap h1 font[color] span,
.view-wrap h1 [style*="color"] b,
.view-wrap h1 [style*="color"] strong {
	color: inherit !important;
}
.view-wrap h1 span.talker-photo { margin-bottom:10px; margin-right:10px; }
.view-head { border-left:0px; border-right:0px; }
.view-head .panel-heading { font-size:13px !important; line-height:22px; }
.view-head .panel-heading .ellipsis { font-size:13px !important; }
.view-head .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }
.view-head .list-group-item { padding:7px 15px; border-style:dotted; font-size:13.5px !important; line-height:1.6; }
.view-tag { margin:10px 0px; padding:0px; color:#888; }
.view-tag a { color:#888; }
.view-tag a:hover { color:crimson; }
.view-cnt { margin-top:4px; }
.view-img img { display:block; max-width:100%; margin:0 auto 15px; border:0; height:auto; }
.view-content {
	font-family: var(--op-font-sans, inherit);
	font-size: var(--op-content-font-size, 15px);
	line-height: var(--op-content-line-height, 1.75);
	letter-spacing: var(--op-content-letter-spacing, -0.015em);
	color: var(--op-text, #333333);
	padding-bottom: 20px;
	word-break: break-word;
	overflow-wrap: break-word;
	clear: both !important;
	width: 100% !important;
}
.view-content img { width:auto; height:auto; max-width:100%; }
.view-content p { padding:0; margin:0 0 0.8em 0; line-height:inherit; font-size:inherit; }
.view-content p:last-child { margin-bottom:0; }
.view-good-box { text-align:center; }
.view-good-box span { margin:15px 6px; width:80px; height:80px; display:inline-block; }
.view-good-box a { background: rgb(245, 245, 245); padding-top:14px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(51, 51, 51); font-size: 22px; line-height:26px; display: inline-block; }
.view-good-box .view-good a:hover { background: rgb(223, 17, 25); color: rgb(255, 255, 255); }
.view-good-box .view-nogood a:hover { background: rgb(0, 0, 0); color: rgb(255, 255, 255); }
.view-author .auth-photo { width:160px; padding-right:15px; }
.view-icon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0 10px;
}
.view-icon .view-act-btns {
	display: flex;
	align-items: center;
	gap: 6px;
}
.view-icon .view-act-btns .btn {
	padding: 5px 12px;
	font-weight: 500;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.view-icon .pull-right {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}
.view-icon img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	margin-bottom: 0;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.view-icon img:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}
.view-comment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 15px 0 10px;
}
.view-comment-header .view-comment {
	margin: 0;
}
.view-comment-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.view-comment-actions .op-btn-list {
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 4px;
}
.view-comment {
	margin: 15px 0 10px;
	padding: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
	border-bottom: 2px solid var(--op-primary, #3dbf62);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.view-comment .orangered {
	color: var(--op-primary, #3dbf62) !important;
}

/* Padding */
.view-padding { padding-left:15px; padding-right:15px; }
.is-mobile .view-padding { padding-left:5px; padding-right:5px; }
#viewcomment { padding-left: 15px; padding-right: 15px; }
.view-author-none { height:1px; border-top:1px solid #eee; margin:14px 0px 16px; }

/* Comment */
.comment-media { margin: 12px 0px 20px; }

/* Comment Avatar (Modern Compact Circle) */
.comment-media .photo {
	float: none !important;
	flex-shrink: 0 !important;
	margin: 1px 0 0 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px;
	width: 36px !important;
	height: 36px !important;
}
.comment-media .photo .media-object {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.comment-media .photo i {
	background: #f1f5f9 !important;
	border-radius: 50% !important;
	width: 36px;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	line-height: 36px !important;
	text-align: center !important;
	color: #94a3b8 !important;
	font-size: 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.comment-media .photo img {
	border-radius: 50% !important;
	width: 36px;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
}
.view-mobile .comment-media .photo {
	width: 34px !important;
	height: 34px !important;
}
.view-mobile .comment-media .photo i {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	max-width: 34px !important;
	max-height: 34px !important;
	line-height: 34px !important;
	font-size: 15px !important;
	padding: 0 !important;
}
.view-mobile .comment-media .photo img {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	max-width: 34px !important;
	max-height: 34px !important;
}

/* Comment Item Flexbox Layout & Safe Breathing Padding */
.comment-media .media {
	border-top: 1px solid #f1f5f9 !important;
	margin: 0 !important;
	padding: 14px 0 16px 0 !important;
	position: relative;
	overflow: visible !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
}
.comment-media :first-child.media {
	border-top: 0px !important;
	margin-top: 0px !important;
	padding-top: 8px !important;
}
.comment-media h5 { margin: 2px 0px; line-height: 22px; }
.comment-media .media .media-body {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	padding-left: 0 !important;
	overflow: visible !important;
}
.comment-media .media-heading {
	overflow: visible !important;
	line-height: 24px;
	margin: 0 0 4px 0 !important;
}
.comment-media .media-heading b {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
}
.comment-media .media .media-info { margin-left: 8px; }
.comment-media .media .media-content {
	font-family: var(--op-font-sans, inherit);
	font-size: var(--op-comment-font-size, 14px);
	line-height: var(--op-comment-line-height, 1.65);
	letter-spacing: -0.01em;
	color: var(--op-text, #333333);
	margin-top: 4px;
	word-break: break-word;
	overflow-wrap: break-word;
	clear: none !important;
	width: 100% !important;
}
.comment-media .media .media-content p {
	margin: 0 0 0.5em 0;
	line-height: inherit;
	font-size: inherit;
}
.comment-media .media .media-content p:last-child {
	margin-bottom: 0;
}
.comment-box textarea#wr_content {
	font-family: var(--op-font-sans, inherit);
	font-size: var(--op-comment-font-size, 14px);
	line-height: var(--op-comment-line-height, 1.65);
}
/* Comment Actions & More Dropdown */
.comment-media .comment-actions {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: -2px;
	float: right;
}
.comment-media .comment-btn-reply {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	height: 24px !important;
	padding: 0 10px !important;
	border-radius: 12px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	background: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}
.comment-media .comment-btn-reply:hover,
.comment-media .comment-btn-reply:active {
	background: #e2e8f0 !important;
	color: #0f172a !important;
}
.comment-media .comment-btn-reply.active {
	background: var(--op-primary, #3dbf62) !important;
	color: #ffffff !important;
	border-color: var(--op-primary, #3dbf62) !important;
}
.comment-media .comment-btn-dropdown {
	position: relative !important;
	display: inline-block !important;
}
.comment-media .comment-btn-more {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #64748b !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	text-decoration: none !important;
	font-size: 14px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}
.comment-media .comment-btn-more:hover,
.comment-media .comment-btn-more:focus,
.comment-media .comment-btn-dropdown.open .comment-btn-more {
	background: #f1f5f9 !important;
	color: #1e293b !important;
	border-color: #e2e8f0 !important;
}
.comment-media .comment-btn-dropdown .dropdown-menu {
	min-width: 175px !important;
	padding: 6px 0 !important;
	margin-top: 4px !important;
	border-radius: 10px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
	background: #ffffff !important;
	z-index: 9999 !important;
	right: 0 !important;
	left: auto !important;
}
.comment-media .comment-btn-dropdown.dropup .dropdown-menu {
	top: auto !important;
	bottom: 100% !important;
	margin-bottom: 6px !important;
	margin-top: 0 !important;
	box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 -8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}
.comment-media .comment-btn-dropdown.open {
	z-index: 1050 !important;
}
.comment-media .comment-btn-dropdown .dropdown-menu > li > a {
	padding: 8px 14px !important;
	font-size: 12.5px !important;
	color: #334155 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: background 0.1s ease !important;
}
.comment-media .comment-btn-dropdown .dropdown-menu > li > a:hover {
	background: #f8fafc !important;
	color: #0f172a !important;
}
.comment-media .comment-btn-dropdown .dropdown-menu .divider {
	margin: 4px 0 !important;
	border-color: #f1f5f9 !important;
}
.comment-media .media .media-btn {	margin-left:0px; }
.comment-media .cmt-good-btn { text-align:right; padding-right:1px; }
.comment-media .cmt-good, .comment-media .cmt-nogood { display:inline-block; width:74px; height:20px; margin-top:10px; padding-right:10px; margin-right:-1px; font:bold 11px verdana; text-align:right; letter-spacing:-1px; line-height:19px; cursor:pointer; }
.comment-media .cmt-good { background: url('../../img/cmt_good.gif') no-repeat left center; color:#f4695b; }
.comment-media .cmt-nogood { background: url('../../img/cmt_nogood.gif') no-repeat left center; color:#888; }

.comment-form { padding-top:10px; }
.comment-box { border:1px solid #ddd; padding:12px 12px 0px; margin-bottom:15px; background:#fbfbfb; }
.comment-content { display:table; width:100%; table-layout:fixed; }
.comment-content .comment-cell { display:table-cell; padding:0px; text-align:center; vertical-align:middle; }
.comment-content .comment-cell.comment-submit { width:80px; height:100%; background:#fafafa; border:1px solid #ccc; border-left:0px; cursor:pointer; font-size: 14px !important; font-weight: 700; letter-spacing: -0.01em; }
.comment-btn .cursor { margin-left:12px; color:#787878; }

#wr_content { resize:none; }
#bo_vc_opt ol {	margin:0;padding:0;list-style:none;zoom:1; }
#bo_vc_opt ol:after { display:block;visibility:hidden;clear:both;content:""; }
#bo_vc_opt ol li { float:left;margin:0; }
#bo_vc_send_sns ul { margin:0;padding:0;list-style:none;zoom:1; }
#bo_vc_send_sns ul:after { display:block;visibility:hidden;clear:both;content:""; }
#bo_vc_send_sns ul li {	float:left;margin:0 20px 0 0; }
#bo_vc_send_sns input {	margin:0 0 0 5px; }

@media all and (max-width:768px) {
	.responsive .view-wrap h1 { text-overflow:clip; overflow:none; white-space:normal; line-height: 28px; font-size: 20px; margin-bottom:10px; }
	.responsive .view-wrap h1 .photo { display:none; }
}

@media all and (max-width:480px) {
	.responsive .view-author .auth-photo { float:none; width:100%; padding-right:0px; }
	.responsive .view-icon .pull-right { float:none !important; }
}
/* ==========================================================================
   Mobile View Layout, Padding & Modern UI Modernization (Miso-Basic 3.5)
   ========================================================================== */
@media all and (max-width: 768px) {
	/* 1. 모바일 본문 및 댓글 좌우 16px 안전 여백(Safe Zone Gutter) 일치화 */
	.view-wrap .view-padding,
	.is-mobile .view-padding,
	.view-padding,
	#viewcomment {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* 2. 제목 줄바꿈 및 모던 반응형 타이포그래피 */
	.view-wrap h1,
	.board-view-heading,
	.responsive .view-wrap h1 {
		white-space: normal !important;
		text-overflow: clip !important;
		overflow: visible !important;
		font-size: 19px !important;
		line-height: 1.45 !important;
		letter-spacing: -0.015em !important;
		padding: 14px 16px 10px 16px !important;
		margin: 0 !important;
		word-break: break-word !important;
		color: #1e293b;
	}

	/* 3. 상단 메타 박스: 투박한 panel 박스 걷어내고 슬림 플랫 인포 바로 정돈 */
	.view-head.panel {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		margin-bottom: 12px !important;
		border-bottom: 1px solid #f1f5f9 !important;
	}
	.view-head .panel-heading {
		background: transparent !important;
		padding: 0 16px 12px 16px !important;
		border: none !important;
		line-height: 1.6 !important;
	}
	.view-head .panel-heading .ellipsis {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 6px 10px !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		font-size: 13px !important;
	}
	.view-head .panel-heading .ellipsis .sp {
		display: none !important;
	}
	.view-head .panel-heading .ellipsis .pull-right {
		margin-left: auto !important;
		float: none !important;
	}

	/* 4. 본문 내용 폰트 크기 및 행간 */
	.view-content {
		font-size: 15.5px !important;
		line-height: 1.75 !important;
		padding-top: 8px !important;
		padding-bottom: 24px !important;
	}

	/* 5. 본문 상단/하단 액션 버튼 바: Flexbox 1줄 양끝 정렬 & 16px 안전 여백 일치화 */
	.view-wrap .view-btn {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 14px 0 20px !important;
		clear: both !important;
		overflow: visible !important;
	}
	.view-wrap .view-btn.view-btn-top {
		padding: 0 !important;
	}
	.view-wrap .view-btn.view-btn-bottom {
		padding: 0 16px !important;
	}
	.view-wrap .view-btn .view-btn-left {
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
	}
	.view-wrap .view-btn .view-btn-right {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		margin-left: auto !important;
		gap: 6px !important;
	}
	.view-wrap .view-btn .clearfix {
		display: none !important;
	}

	/* 6. 추천/비추천 버튼: 80px 거대 원형 -> 모던 44px 캡슐 버튼 개편 */
	.view-good-box {
		margin: 20px 0 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 12px !important;
	}
	.view-good-box span {
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		display: inline-flex !important;
	}
	.view-good-box a {
		width: auto !important;
		height: 44px !important;
		border-radius: 24px !important;
		padding: 0 20px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		border: 1px solid #e2e8f0 !important;
		background: #ffffff !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
		transition: all 0.15s ease !important;
	}
	.view-good-box a br {
		display: none !important;
	}
	.view-good-box .view-good a {
		color: #e11d48 !important;
		border-color: #fecdd3 !important;
		background: #fff1f2 !important;
	}
	.view-good-box .view-good a:hover,
	.view-good-box .view-good a:active {
		background: #e11d48 !important;
		color: #ffffff !important;
		border-color: #e11d48 !important;
	}
	.view-good-box .view-nogood a {
		color: #475569 !important;
		border-color: #e2e8f0 !important;
		background: #f8fafc !important;
	}
	.view-good-box .view-nogood a:hover,
	.view-good-box .view-nogood a:active {
		background: #475569 !important;
		color: #ffffff !important;
		border-color: #475569 !important;
	}

	/* 7. 댓글 작성 폼 및 도구 모바일 현대화 */
	.comment-box {
		padding: 14px 14px 10px 14px !important;
		border-radius: 12px !important;
		background: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
		margin-bottom: 20px !important;
	}
	.comment-content {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		width: 100% !important;
	}
	.comment-content .comment-cell {
		display: block !important;
		width: 100% !important;
	}
	.comment-content textarea#wr_content {
		width: 100% !important;
		border: 1px solid #e2e8f0 !important;

		padding: 10px 12px !important;
		min-height: 80px !important;
		border-radius: 8px !important;
		font-size: 14px !important;
		line-height: 1.6 !important;
		background: #f8fafc !important;
		box-shadow: none !important;
		transition: all 0.2s ease !important;
	}
	.comment-content textarea#wr_content:focus {
		background: #ffffff !important;
		border-color: var(--op-primary, #3dbf62) !important;
		box-shadow: 0 0 0 2px rgba(61, 191, 98, 0.15) !important;
		outline: none !important;
	}
	.comment-content .comment-cell.comment-submit {
		width: 100% !important;
		height: 42px !important;
		border-radius: 21px !important;
		background: var(--op-primary, #3dbf62) !important;
		color: #ffffff !important;
		border: none !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 14.5px !important;
		font-weight: 600 !important;
		letter-spacing: -0.01em !important;
		cursor: pointer !important;
		box-shadow: 0 2px 4px rgba(61, 191, 98, 0.2) !important;
		transition: all 0.15s ease !important;
	}
	.comment-content .comment-cell.comment-submit:active {
		transform: scale(0.99) !important;
		background: #33a353 !important;
	}
	.comment-btn {
		margin: 6px 0 0 !important;
		padding: 6px 0 0 !important;
		border-top: 1px solid #f1f5f9 !important;
	}
	.comment-btn .form-group.pull-right {
		float: none !important;
		display: flex !important;
		align-items: center !important;
		margin-bottom: 0 !important;
	}
	.comment-btn label.checkbox-inline {
		font-size: 13px !important;
		color: #64748b !important;
		font-weight: 500 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 4px !important;
	}

	/* 8. 본문 우측 하단 SNS/도구 아이콘 슬림화 */
	.view-icon {
		margin: 12px 0 6px !important;
	}
	.view-icon img {
		width: 30px !important;
		height: 30px !important;
		opacity: 0.85 !important;
		transition: opacity 0.15s ease !important;
	}
	.view-icon img:hover {
		opacity: 1 !important;

	}
}

/* ==========================================================================
   Full Dark Mode (html.theme-dark) Pairings for Detail View
   ========================================================================== */
html.theme-dark .view-wrap h1,
body.theme-dark .view-wrap h1,
html.theme-dark .board-view-heading,
body.theme-dark .board-view-heading {
	color: #f1f5f9 !important;
}
html.theme-dark .view-head.panel,
body.theme-dark .view-head.panel {
	border-color: #272730 !important;
}
html.theme-dark .view-head .panel-heading,
body.theme-dark .view-head .panel-heading {
	color: #94a3b8 !important;
}
html.theme-dark .view-content,
body.theme-dark .view-content {
	color: #e2e8f0 !important;
}
html.theme-dark .view-good-box .view-good a,
body.theme-dark .view-good-box .view-good a {
	background: #2a151b !important;
	border-color: #4c1d28 !important;
	color: #fb7185 !important;
}
html.theme-dark .view-good-box .view-good a:hover,
body.theme-dark .view-good-box .view-good a:hover {
	background: #e11d48 !important;
	color: #ffffff !important;
}
html.theme-dark .view-good-box .view-nogood a,
body.theme-dark .view-good-box .view-nogood a {
	background: #18181d !important;
	border-color: #272730 !important;
	color: #94a3b8 !important;
}
html.theme-dark .view-good-box .view-nogood a:hover,
body.theme-dark .view-good-box .view-nogood a:hover {
	background: #334155 !important;
	color: #ffffff !important;
}
html.theme-dark .view-comment,
body.theme-dark .view-comment {
	color: #f1f5f9 !important;
	border-color: var(--op-primary, #3dbf62) !important;
}
html.theme-dark .comment-content textarea#wr_content,
body.theme-dark .comment-content textarea#wr_content {
	background: #202028 !important;
	border-color: #2e2e38 !important;
	color: #e2e8f0 !important;
}
html.theme-dark .comment-content textarea#wr_content:focus,
body.theme-dark .comment-content textarea#wr_content:focus {
	background: #262630 !important;
	border-color: var(--op-primary, #3dbf62) !important;
}
html.theme-dark .comment-btn,
body.theme-dark .comment-btn {
	border-color: #272730 !important;
}
html.theme-dark .comment-btn label.checkbox-inline,
body.theme-dark .comment-btn label.checkbox-inline {
	color: #94a3b8 !important;
}
html.theme-dark .comment-box,
body.theme-dark .comment-box {
	background: #18181d !important;
	border-color: #272730 !important;
}
html.theme-dark .comment-content .comment-cell.comment-submit,
body.theme-dark .comment-content .comment-cell.comment-submit {
	background: var(--op-primary, #3dbf62) !important;
	border-color: #272730 !important;
	color: #ffffff !important;
}
html.theme-dark .view-author-none,
body.theme-dark .view-author-none {
	border-color: #272730 !important;
}

/* ==========================================================================
   Dark Mode: Comment Actions & Dropdown
   ========================================================================== */
html.theme-dark .comment-media .media,
body.theme-dark .comment-media .media {
	border-top-color: #272730 !important;
}
html.theme-dark .comment-media .photo i,
body.theme-dark .comment-media .photo i {
	background: #202028 !important;
	color: #64748b !important;
}
html.theme-dark .comment-media .media-heading b,
body.theme-dark .comment-media .media-heading b {
	color: #f1f5f9 !important;
}
html.theme-dark .comment-media .media .media-content,
body.theme-dark .comment-media .media .media-content {
	color: #cbd5e1 !important;
}
html.theme-dark .comment-media .comment-btn-reply,
body.theme-dark .comment-media .comment-btn-reply {
	background: #202028 !important;
	border-color: #2e2e38 !important;
	color: #cbd5e1 !important;
}
html.theme-dark .comment-media .comment-btn-reply:hover,
body.theme-dark .comment-media .comment-btn-reply:hover {
	background: #2a2a34 !important;
	color: #f1f5f9 !important;
}
html.theme-dark .comment-media .comment-btn-reply.active,
body.theme-dark .comment-media .comment-btn-reply.active {
	background: var(--op-primary, #3dbf62) !important;
	color: #ffffff !important;
	border-color: var(--op-primary, #3dbf62) !important;
}
html.theme-dark .comment-media .comment-btn-more,
body.theme-dark .comment-media .comment-btn-more {
	color: #94a3b8 !important;
}
html.theme-dark .comment-media .comment-btn-more:hover,
html.theme-dark .comment-media .comment-btn-dropdown.open .comment-btn-more,
body.theme-dark .comment-media .comment-btn-more:hover,
body.theme-dark .comment-media .comment-btn-dropdown.open .comment-btn-more {
	background: #202028 !important;
	color: #f1f5f9 !important;
	border-color: #2e2e38 !important;
}
html.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu,
body.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu {
	background: #18181d !important;
	border-color: #272730 !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
html.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu > li > a,
body.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu > li > a {
	color: #cbd5e1 !important;
}
html.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu > li > a:hover,
body.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu > li > a:hover {
	background: #202028 !important;
	color: #f1f5f9 !important;
}
html.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu .divider,
body.theme-dark .comment-media .comment-btn-dropdown .dropdown-menu .divider {
	border-color: #272730 !important;
}